<template>
  <el-table
    ref="multipleTable"
    :data="tableData"
    stripe=true 
    tooltip-effect="dark"
    style="width: 100%"
    :row-class-name="tableRowClassName"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>

      <el-table-column
      prop="name"
      label="用户名"
      width="200">
    </el-table-column>

      <el-table-column
      prop="connect"
      label="联系方式"
      width="250">
    </el-table-column>

      <el-table-column
      prop="department"
      label="部门"
      width="250">
    </el-table-column>

      <el-table-column
      prop="create"
      label="创建时间"
      width="250">
    </el-table-column>

      <el-table-column
      prop="finally"
      label="最后访问时间"
      width="250">
    </el-table-column>
  <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [
          {
            name:'王小虎',
            connect:'123456789',
            department:'财务',
            create:'2021-6-1',
            finally:'2021-9-23',
          },{
            name:'王小虎',
            connect:'123456789',
            department:'财务',
            create:'2021-6-1',
            finally:'2021-9-23',
          },{
            name:'王小虎',
            connect:'123456789',
            department:'财务',
            create:'2021-6-1',
            finally:'2021-9-23',
          },{
            name:'王小虎',
            connect:'123456789',
            department:'财务',
            create:'2021-6-1',
            finally:'2021-9-23',
          },{
            name:'王小虎',
            connect:'123456789',
            department:'财务',
            create:'2021-6-1',
            finally:'2021-9-23',
          },{
            name:'王小虎',
            connect:'123456789',
            department:'财务',
            create:'2021-6-1',
            finally:'2021-9-23',
          },{
            name:'王小虎',
            connect:'123456789',
            department:'财务',
            create:'2021-6-1',
            finally:'2021-9-23',
          },{
            name:'王小虎',
            connect:'123456789',
            department:'财务',
            create:'2021-6-1',
            finally:'2021-9-23',
          },{
            name:'王小虎',
            connect:'123456789',
            department:'财务',
            create:'2021-6-1',
            finally:'2021-9-23',
          },{
            name:'王小虎',
            connect:'123456789',
            department:'财务',
            create:'2021-6-1',
            finally:'2021-9-23',
          },
          ],
        multipleSelection: []
      }
    },
    methods: {
      handleClick(row) {
        console.log(row);
      },
      tableRowClassName({row, rowIndex}) {
        if (rowIndex%2 === 0) {
          return 'warning-row';
        } else {
          return '';
        }
        
      }
    },
}
</script>
<style>
.el-table .warning-row {
    background: rgb(240, 249, 247);
  }
</style>